<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Logistics个人中心</title>
    <!-- Bootstrap core CSS -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<nav th:replace="~{front/log/log_topbar::top}"></nav>
<div class="container-fluid">
    <div class="row" style="margin-top: 70px">
        <div class="col-md-2 sidebar" style="background: #f6f6f6; height: 100%">
            <ul class="nav nav-sidebar">
                <li style="font-size: 20px">个人资料</li>
                <li><a th:href="@{'/clientCenter?clientAccount='+${clientInfo.clientAccount}}">个人信息</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li style="font-size: 20px">我的订单</li>
                <li><a th:href="@{'/clientCenterOrderAll?clientAccount='+${clientInfo.clientAccount}}">全部订单</a></li>
                <li><a th:href="@{'/clientCenterOrderFinished?clientAccount='+${clientInfo.clientAccount}}">已完成</a></li>
                <li><a th:href="@{'/clientCenterOrderUnfinished?clientAccount='+${clientInfo.clientAccount}}" style="background-color: #428bca; color: #ffffff">未接单</a></li>
                <li><a th:href="@{'/clientCenterOrderReceived?clientAccount='+${clientInfo.clientAccount}}">已接单</a></li>
                <li><a th:href="@{'/clientCenterOrderRefused?clientAccount='+${clientInfo.clientAccount}}">问题订单</a></li>
            </ul>
        </div>
        <div class="col-md-10 main">
            <h2 class="sub-header">未接单订单</h2>
            <hr>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>订单号</th>
                    <th>货物名称</th>
                    <th>承运公司</th>
                    <th>出发地 → 到达地</th>
                    <th>订单状态</th>
                    <th>订单操作</th>
                </tr>
                </thead>
                <tbody>
                <tr style="background-color: #dddddd" th:each="order:${unfinishedOrderInfo}">
                    <th th:text="${order.orderId}"></th>
                    <th th:text="${order.orderGoodsName}"></th>
                    <th><a style="text-decoration: none" target="_blank" th:text="${order.orderCom}" th:href="@{'/com_detail_route?comName='+${order.orderCom}}"></a></th>
                    <th th:text="${order.orderResProvince}+${order.orderResCity}+${order.orderResCountry}+'→'+${order.orderDesProvince}+${order.orderDesCity}+${order.orderDesCountry}"></th>
                    <th th:text="${order.orderStatus}"></th>
                    <th>
                        <span><a id="myModal" data-toggle="modal" data-target="#exampleModal" th:onclick="'javascript:Values(\''+${order.orderId}+'\')'"><button class="btn btn-default btn-sm">查看</button></a></span>
                        <span><a th:onclick="'javascript:cancelOrder(\''+${order.orderId}+'\')'"><button type="button" class="btn btn-danger btn-sm">取消订单</button></a></span>
                    </th>
                </tr>
                </tbody>
            </table>

            <!------模态框------>
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">订单详细信息</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>
                                <span>订单号:</span>
                                <span id="orderId" style="font-weight: bold"></span>
                                <span>订单状态:</span>
                                <span id="orderStatus" style="font-weight: bold"></span>
                            </p>
                            <p>
                                <span>订单状态原因:</span>
                                <span id="orderReason" style="font-weight: bold"></span>
                            </p>
                            <hr>
                            <p>
                                <span>下单人:</span>
                                <span id="orderClientName" style="font-weight: bold"></span>
                                <span>联系电话:</span>
                                <span id="orderClientPhone" style="font-weight: bold"></span>
                            </p>
                            <hr>
                            <p>
                                <span>货物名称:</span>
                                <span style="width: 150px;font-weight: bold" id="orderGoodsName"></span>
                                <span>总件数:</span>
                                <span style="width: 150px;font-weight: bold"  id="orderGoodsNum"></span>
                            </p>
                            <p>
                                <span>预估体积:</span>
                                <span style="width: 150px;font-weight: bold" id="orderGoodsCapacity"></span>
                                <span>预估重量:</span>
                                <span style="width: 150px;font-weight: bold" id="orderGoodsWeight"></span>
                            </p>
                            <p>
                                <span>订单备注:</span>
                                <span style=" width: 450px;font-weight: bold" id="orderRemarks"></span>
                            </p>
                            <hr>
                            <p>
                                <span>出发地:</span>
                                <span style="width: 150px;font-weight: bold" id="orderResProvince"></span>
                                <span style="width: 150px;font-weight: bold" id="orderResCity"></span>
                                <span style="width: 150px;font-weight: bold" id="orderResCountry"></span>
                            </p>
                            <p>
                                <span>出发地详细地址:</span>
                                <span style="width: 300px;font-weight: bold" id="orderResAddress"></span>
                            </p>
                            <p>
                                <span>出发地联系人:</span>
                                <span style="width: 80px;font-weight: bold" id="orderSendPerson"></span>
                                <span>手机:</span>
                                <span style="width: 100px;font-weight: bold" id="orderSendPersonPhone"></span>
                            </p>
                            <hr>
                            <p>
                                <span>到达地:</span>
                                <span style="width: 150px;font-weight: bold" id="orderDesProvince"></span>
                                <span style="width: 150px;font-weight: bold" id="orderDesCity"></span>
                                <span style="width: 150px;font-weight: bold" id="orderDesCountry"></span>
                            </p>
                            <p>
                                <span>到达地详细地址:</span>
                                <span style="width: 300px;font-weight: bold" id="orderDesAddress"></span>
                            </p>
                            <p>
                                <span>到达地联系人:</span>
                                <span style="width: 80px;font-weight: bold" id="orderReceivePerson"></span>
                                <span>手机:</span>
                                <span style="width: 100px;font-weight: bold" id="orderReceivePersonPhone"></span>
                            </p>
                            <!--<span>请输入评价内容：</span>-->
                            <!--<textarea class="form-control" aria-label="With textarea" name="evaluateContent"></textarea>-->
                            <div class="modal-footer">
                                <!--<a id="saveA" onclick="saveFcn();"><button type="button" class="btn btn-primary" >保存</button></a>-->
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!------------------>

        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../jquery-3.3.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    //出发地
    $(function () {
        ProvinceBind1();

        $("#province1").change(function () {
            CityBind1();
        })

        $("#city1").change(function () {
            CountryBind1();
        })
    });
    function ProvinceBind1() {
        // $("#province1").html("");
        var str = "<option> 请选择省 </option>";
        $.ajax({
            url: "/getProvince",
            success: function (data) {
                $.each(data.data, function (i,item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                })
                $("#province1").append(str);
            },
            error: function () {
                alert("Error省");
            }
        })
    }

    function CityBind1() {
        $("#city1").html("");
        var options = $("#province1 option:selected");
        var province = options.val();//province为选中省份的cityName
        // alert(province);
        if (province == "")
            return ;
        $("#city1").html("");
        var str="<option> 请选择市 </option>";

        $.ajax({
            url: "/getCities",
            data: {"parentCity": province},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#city1").append(str);
            },
            error: function () {
                alert("Error市");
            }
        });
    }

    function CountryBind1() {
        $("#country1").html("");
        var options = $("#city1 option:selected");
        var city = options.val();
        if (city == "")
            return;
        $("#country1").html();
        var str="<option> 请选择县 </option>";

        $.ajax({
            url: "/getCountries",
            data: {"parentCity": city},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#country1").append(str);
            }
        });
    }
</script>
<script type="text/javascript">
    function confirmOrder(orderId) {
        if (confirm("确定订单已完成吗?")){
            $.ajax({
                url: "/confirmOrder",
                data: {"orderId" : orderId},
                success: function () {
                    alert("订单已确认!");
                    $.ajax({
                        url: "/findOrderClientByOrderId",
                        data: {"orderId" : orderId},
                        success: function (data) {
                            window.location="/clientCenterOrderAll?clientAccount="+data.data;
                        }
                    })
                }
            });
            return true;
        }
        else{return false;}
    }

    function deleteOrder(orderId) {
        if (confirm("订单删除后将无法恢复，确认删除吗?")){
            $.ajax({
                url: "/clientDeleteOrderByOrderId",
                data: {"orderId" : orderId},
                success: function () {
                    alert("订单已删除!");
                    window.location="/clientCenterOrderAll?clientAccount="+document.getElementById("nowClient").text;
                }
            });
            return true;
        }
        else {return false;}
    }

    function cancelOrder(orderId) {
        if (confirm("订单未接单，确认取消订单吗?")){
            $.ajax({
                url: "/clientDeleteOrderByOrderId",
                data: {"orderId" : orderId},
                success: function () {
                    alert("订单已取消!");
                    window.location="/clientCenterOrderAll?clientAccount="+document.getElementById("nowClient").text;
                }
            });
            return true;
        }
        else {return false;}
    }
</script>
<script type="text/javascript">
    $("#exampleModal").modal("hide");

    function Values(orderId) {
        $.ajax({
            url: "/getOrderById",
            data: {"orderId": orderId},
            success: function (data) {
                $("#orderStatus").text(data.data.orderStatus);
                $("#orderReason").text(data.data.orderReason);
                $("#orderResProvince").text(data.data.orderResProvince);
                $("#orderResCity").text(data.data.orderResCity);
                $("#orderResCountry").text(data.data.orderResCountry);
                $("#orderResAddress").text(data.data.orderResAddress);
                $("#orderDesProvince").text(data.data.orderDesProvince);
                $("#orderDesCity").text(data.data.orderDesCity);
                $("#orderDesCountry").text(data.data.orderDesCountry);
                $("#orderDesAddress").text(data.data.orderDesAddress);
                $("#orderSendPerson").text(data.data.orderSendPerson);
                $("#orderSendPersonPhone").text(data.data.orderSendPersonPhone);
                $("#orderReceivePerson").text(data.data.orderReceivePerson);
                $("#orderReceivePersonPhone").text(data.data.orderReceivePersonPhone);
                $("#orderGoodsName").text(data.data.orderGoodsName);
                $("#orderGoodsNum").text(data.data.orderGoodsNum);
                $("#orderGoodsCapacity").text(data.data.orderGoodsCapacity);
                $("#orderGoodsWeight").text(data.data.orderGoodsWeight);
                $("#orderRemarks").text(data.data.orderRemarks);
                $("#orderClient").text(data.data.orderClient);
            }
        });
        $.ajax({
            url: "getClientInfoByOrderId",
            data: {"orderId": orderId},
            success: function (data) {
                $("#orderClientName").text(data.data.clientName);
                $("#orderClientPhone").text(data.data.clientPhone);
            }
        });
        $("#orderId").text(orderId);
    }
</script>
</body>
</html>
